<template>
  <div class="siteInfo" p-5>
    <div class="siteInfo-top">
      <div class="siteInfo-top-tittle">场所详情</div>
    </div>
    <div>
      <div class="siteInfo-body-box-tittle">
        <div class="siteInfo-body-box-tittle-left"></div>
        <div class="siteInfo-body-box-tittle-right">单位信息</div>
      </div>
      <div class="siteInfo-body-box-info">
        <a-descriptions
          :labelStyle="{ width: '160px' }"
          :content-style="{ color: '#444444', width: 'calc(100% / (24 / 6))' }"
          bordered
        >
          <a-descriptions-item label="当事人类型" :span="1">{{
            casePartyType(siteInfo.partyType)
          }}</a-descriptions-item>
          <a-descriptions-item label="单位名称" :span="1">{{
            siteInfo.placeName
          }}</a-descriptions-item>
          <a-descriptions-item label="单位联系电话" :span="1">{{
            siteInfo.contactsTel
          }}</a-descriptions-item>
          <a-descriptions-item label="注册地址" :span="1">{{
            siteInfo.registerCity +
            siteInfo.registerCounty +
            siteInfo.registerTown +
            siteInfo.registerAddress
          }}</a-descriptions-item>
          <a-descriptions-item label="经营地址" :span="1">{{
            siteInfo.operateCity +
            siteInfo.operateCounty +
            siteInfo.operateTown +
            siteInfo.operateAddress
          }}</a-descriptions-item>
          <a-descriptions-item label="法人姓名" :span="1">{{
            siteInfo.headName
          }}</a-descriptions-item>
          <a-descriptions-item label="法人电话" :span="1">{{
            siteInfo.headTel
          }}</a-descriptions-item>
          <a-descriptions-item label="社会统一信用代码" :span="1">{{
            siteInfo.idCode
          }}</a-descriptions-item>
        </a-descriptions>
      </div>

      <a-tabs v-model:activeKey="activeKey" size="large" @change="activeChange">
        <a-tab-pane key="1" tab="消防监督检查记录">
          <DynamicTable
            :data-request="xfTableData"
            :columns="xfjdjcCoumns"
            :scroll="{ x: 1600 }"
            :search="false"
            :showToolBar="false"
            bordered
          >
          </DynamicTable
        ></a-tab-pane>
        <a-tab-pane key="2" tab="日常消防巡查记录">
          <DynamicTable
            :data-request="rcxfTableData"
            :columns="rcxfjcCoumns"
            :scroll="{ x: 1600 }"
            :search="false"
            :showToolBar="false"
            bordered
          >
          </DynamicTable>
        </a-tab-pane>
        <a-tab-pane key="3" tab="立案记录">
          <DynamicTable
            :data-request="kyjcrwTableData"
            :columns="kyjcrwCoumns"
            :scroll="{ x: 1600 }"
            :search="false"
            :showToolBar="false"
            bordered
          >
          </DynamicTable>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="bottomBox"></div>
    <div class="bottomBtns" style="z-index: 3">
      <a-button size="large" @click="cacel">关闭</a-button>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import router from '@/router';
  import { xfjdjcCoumns } from './xfjdjcCoumns';
  import { rcxfjcCoumns } from './rcxfjcCoumns';
  import { kyjcrwCoumns } from './kyjcrwCoumns';
  import { getKyjcrwList, getPlaceInfo, getRcxfjcList, getXfjdjcList } from '@/api/site';
  import { onMounted, ref } from 'vue';
  import { useTable } from '@/components/core/dynamic-table';
  const route = useRoute();
  const activeKey = ref('1');
  const [DynamicTable] = useTable();

  const siteInfo = ref<any>({});

  const cacel = () => {
    router.back();
  };

  defineOptions({
    name: 'siteInfo',
  });

  const casePartyType = (val) => {
    switch (val) {
      case 0:
        return '自然人';
      case 1:
        return '法人';
      case 2:
        return '个体工商户';
      case 3:
        return '非法人组织';
      default:
        break;
    }
  };

  const activeChange = async (val) => {
    console.log(val);
  };

  const xfTableData = async (params: any): Promise<API.TableListResult> => {
    const data = await getXfjdjcList({
      ...params,
      palaceId: route.query.id,
    });
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  const rcxfTableData = async (params: any): Promise<API.TableListResult> => {
    const data = await getRcxfjcList({
      ...params,
      palaceId: route.query.id,
    });
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  const kyjcrwTableData = async (params: any): Promise<API.TableListResult> => {
    const data = await getKyjcrwList({
      ...params,
      palaceId: route.query.id,
    });
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  onMounted(async () => {
    siteInfo.value = await getPlaceInfo(route.query.id);
  });
</script>
<style lang="less" scoped>
  .siteInfo {
    &-top {
      &-tittle {
        padding: 0px 0 16px 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        color: rgba(68, 68, 68, 1);

        border-bottom: 1px solid rgba(240, 240, 240, 1);
      }
    }

    &-body {
      &-box {
        margin-bottom: 16px;
        &-tittle {
          display: flex;
          align-items: center;
          padding: 13px 0 13px 0;
          &-left {
            border: 1px solid #0f53ac;
            margin-right: 7px;
            border-radius: 4px;
            height: 14px;
          }

          &-right {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            color: rgba(68, 68, 68, 1);
          }
        }
        &-info {
          :global(.ant-descriptions-item-label) {
            width: 160px;
          }
        }
      }
    }
  }
</style>
